<template>
  <div class="modal" v-show="visible">
    <div class="modal-title">
      {{ title }}
    </div>
    <div class="modal-subtitle">
      {{ subtitle }}
    </div>
    <div class="modal-btn" @click="btnClick">确定</div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
defineProps({
  visible: Boolean,
  title: String,
  subtitle: String
})
const emits = defineEmits(['sure'])
const btnClick = () => {
  console.log('close___')
  emits('sure')
}
</script>

<style lang="scss" scoped>
.modal {
  width: 300px;
  border-radius: 10px;
  overflow: hidden;
  // height: 80vh;
  // max-height: 700px;
  background: #27386f;
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translate(-50%, 0%);
  box-shadow: 0 0 20px rgba(0,0,0.8);
  &-title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    margin: 0 auto;
    border-bottom: 1px solid #f8f8f8;
  }
  &-subtitle {
    padding: 30px;
    text-align: center;
    font-size: 18px;
    color: #fff;
  }
  &-btn{
    width: 100px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-size: 18px;
    background: #f8f8f8;
    margin:0 auto 20px auto;
  }
}
</style>
